<template>
  <div>
    <el-form-item label="标题">
      <el-input v-model="optionModel.descriptions.title" />
    </el-form-item>
    <el-form-item label="数据">
      <div class="el-table-defaultValue-editor">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-edit-outline"
          @click="visible = true"
          >编辑数据</el-button
        >

           <div class="bind" @click="dVisible=true" >
                <svg-icon icon-class="code"/>
            </div>
      </div>
    </el-form-item>
    <el-form-item label="是否带边框">
        <el-switch v-model="optionModel.descriptions.border"></el-switch>
    </el-form-item>
    <el-form-item label="排列的方向">
              <el-select v-model="optionModel.descriptions.direction">
              <el-option v-for="item in directionList" :key="item" :label="item"
                         :value="item">
              </el-option>
            </el-select>
    </el-form-item>
    <el-form-item label="是否显示冒号">
            <el-switch v-model="optionModel.descriptions.colon"></el-switch>
    </el-form-item>
    <el-form-item label="一行的数量">
           <el-input-number v-model="optionModel.descriptions.column" :min="1" :max="4" style="width: 100%"></el-input-number>
    </el-form-item>
     <el-dialog
        :visible.sync="visible"
        title="编辑数据"
        :append-to-body="true"
      >
        <code-editor
          :mode="'json'"
          :readonly="false"
          v-model="optionModel.descriptions.code"
        ></code-editor>

        <div slot="footer">
          <el-button size="small" type="primary" @click="save">确定</el-button>
          <el-button size="small" @click="visible = false">取消</el-button>
        </div>
      </el-dialog>

      <select-model-data
        :selectedWidget="selectedWidget"
        :visible.sync="dVisible"
        :designer="designer"
      >
      </select-model-data>
  </div>
</template>

<script>
import CodeEditor from "@/components/code-editor/index.vue";
import SvgIcon from "@/components/svg-icon/index.vue";
import SelectModelData from "@/components/form-designer/config-common/select-model-data/select-model-data.vue";

export default {
  name: "description-editor",
  components: { SelectModelData, SvgIcon, CodeEditor },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      visible: false,
      dVisible: false,
      directionList:['vertical' , 'horizontal'	]
    };
  },
  computed: {
    optionModel() {
      return this.selectedWidget.options;
    },
  },
  methods: {
    save() {
      this.emitDefaultValueChange();
      this.visible = false;
    },
    emitDefaultValueChange() {
      if (!!this.designer && !!this.designer.formWidget) {
        let fieldWidget = this.designer.formWidget.getWidgetRef(
          this.selectedWidget.options.name
        );
        if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
          fieldWidget.refreshDefaultValue();
        }
      }
    },
  },
  mounted() {
    
  },
};
</script>

<style lang="scss" scoped>
.el-table-defaultValue-editor {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;

  > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .bind {
    cursor: pointer;
  }

  .bindData {
    background: $--color-primary;
    color: white;
    border-radius: 4px;
  }
}
</style>
